<template>
  <div class="balanceBill">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      :subtitle="subtitle"
      @goBack="goBack()"
      @goSubtitle="goSubtitle()">
    </commonHeader>
    <!--    内容-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="content">
        <!--    总收益 总支出-->
        <div class="total">
          <!--        年月-->
          <div class="year borderBottom flex-space-center" @click="chooseDate()">
            {{defaultDate}}
            <div class="downImg flex-space-center">
              <img src="http://job.dayinyun.com/down.png" alt="">
            </div>
          </div>
          <!--        本月收益和支出-->
          <div class="month flex-space-between">
            <div class="monthMoney flex-space-center">
              <h4>本月收益</h4>
              <h3 class="income">{{billMsg.income?billMsg.income:0}}</h3>
            </div>
            <div class="line"></div>
            <div class="monthMoney flex-space-center">
              <h4>本月支出</h4>
              <h3 class="expend">{{billMsg.expend?billMsg.expend:0}}</h3>
            </div>
          </div>
        </div>
        <!--      明细筛选-->
        <div class="billFilter">
          <div class="filterTitle borderBottom flex-space-between">
            <div class="title">明细筛选</div>
            <div class="filterWord flex-end">
              <van-dropdown-menu active-color="#000">
                <van-dropdown-item v-model="value1" :options="option1" @change="chooseFilter"/>
              </van-dropdown-menu>
            </div>
          </div>
          <!--        筛选列表-->
          <div v-if="billList&&billList.length*1>0">
            <van-list
              v-model="loading"
              :finished="finished"
              :offset="20"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="billList">
                <div class="listItems borderBottom flex-space-between" v-for="item in billList" :key="item.id">
                  <div class="listItemLeft">
                    <!--              明细标题-->
                    <div>{{item.subject_name}}</div>
                    <!--              明细时间-->
                    <div class="time">{{item.created_at}}</div>
                  </div>
                  <!--            明细价格-->
                  <!--            收入-->
                  <div v-if="item.type*1>0" class="listItemsPrice colorPrice">+ {{item.amount | priceIntFilter}}</div>
                  <!--            支出-->
                  <div v-else class="listItemsPrice">- {{item.amount | priceIntFilter}}</div>

                </div>
              </div>
            </van-list>
          </div>
          <div v-else class="noData flex-space-center">
            暂无数据！
          </div>


        </div>
      </div>
    </van-pull-refresh>
    <!--    弹框-->
    <van-popup v-model="dataTimeShow" position="bottom" round>
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="dataTimeConfirm"
        @cancel="dataTimeCancel"
      />
    </van-popup>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {GETBALANCELIST} from '../../apis/mine';
  export default {
    name:"balanceBill",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"余额账单",//标题
        subtitle:'',//副标题
        billMsg:{},//账单页面所有数据
        billList:[],//账单明细列表
        // 选择时间弹框配置
        minDate: new Date(2018, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        dataTimeShow:false,//选择时间弹出层
        years:'',//默认当前时间
        defaultDate:this.formatDate(new Date(), 'yyyy年MM月'),//默认年月日
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,
        page:1,//分页页数
        pageSize:10,//每页数据
        // 下拉菜单配置
        filterType:0,//筛选默认值
        value1: 0,
        option1: [
          { text: '全部', value: 0 },
          { text: '收入', value: 1 },
          { text: '支出', value: -1 },
        ],
      }
    },
    mounted() {
      this.years = this.formatDate(new Date(), 'yyyy-MM').split('-')[0] + this.formatDate(new Date(), 'yyyy-MM').split('-')[1];//默认当前时间
      this.getBalanceList();//获取账单列表
    },
    methods:{
      // 返回矿金列表页
      goBack(){
        this.$router.back()
      },
      // 弹框  选择时间
      chooseDate(){
        this.dataTimeShow = true;//选择时间弹框显示
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      // 选择时间点击确认
      dataTimeConfirm(value){
        this.defaultDate = this.formatDate(new Date(value), 'yyyy年MM月')
        this.years = this.formatDate(new Date(value), 'yyyy/MM').split('/')[0] + this.formatDate(new Date(value), 'yyyy/MM').split('/')[1];//默认当前时间
        this.dataTimeShow = false;//选择时间弹框关闭
        this.getBalanceList()// 获取账单列表
      },
      // 选择时间点击取消
      dataTimeCancel(value){
        this.dataTimeShow = false;//选择时间弹框关闭
      },

      // 筛选
      chooseFilter(value){
        this.filterType = value;
        this.billList = [];
        this.getBalanceList();
      },

      //------------------------------- 接口开始--------------------
      // 获取账单列表
      getBalanceList(){
        let getBalanceList = GETBALANCELIST
        let params = {
          years:this.years,
          type:this.filterType,//类型 默认全部 0全部 -1 收入 1支出
          page:this.page,//分页页数
        }
        getBalanceList(params)
          .then(res => {
            if(res.data.code*1===200){
              this.billMsg = res.data.data;
              // 下拉刷新
              if (this.refreshing) {
                this.billList = [];
                this.refreshing = false;
              }
              this.loading = false;
              const billList = res.data.data.list;//每日挖矿列表
              if(billList == null || billList.length*1 === 0){
                this.finished = true
                return
              }
              if(billList.length*1 < this.pageSize){
                this.finished = true
              }
              if(this.page*1 == 1){
                this.billList = billList
              }else{
                this.billList = this.billList.concat(billList)
              }

            } else {
              this.$toast(res.data.message);
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getBalanceList();//获取账单列表
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getBalanceList();//获取账单列表
      },
      // ----------------------------接口结束--------------------------
    }
  }
</script>

<style lang='less' scoped>
  @import (reference) url(../../assets/less/common);
  .balanceBill {
    width:100%;
    background: #000000;
    overflow-y: scroll;
    padding-top:1.38rem;
    box-sizing: border-box;
    .content{
      width:100%;
      padding:0.3rem;
      box-sizing: border-box;
      overflow-y: auto;
      .total{
        width:100%;
        border-radius:0.1rem ;
        background:#232323;
        .year{
          width:100%;
          height:1.12rem;
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.36rem;
          color:#FFFFFF;
          .downImg{
            width:0.27rem;
            height: 0.34rem;
            margin-left:0.2rem;
            img{
              width:100%;
              height:auto;
            }
          }
        }
        .month{
          width: 100%;
          padding:0.45rem 0;
          box-sizing: border-box;
          .monthMoney{
            width:49%;
            flex-direction: column;
            h4{
              font-size:@fontSize28;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.3rem;
              color:#FFFFFF;
            }
            h3{
              font-size:@fontSize40;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.4rem;
              color:#FFFFFF;
              margin-top:0.33rem;
            }
            h3.income{
              color:#FD0000;
            }
          }
          .line{
            width:0.02rem;
            height:1.32rem;
            background: rgba(0,0,0,0.3);
          }
        }
      }
      .billFilter{
        width:100%;
        border-radius:0.1rem ;
        background:#232323;
        margin-top:0.14rem;
        .filterTitle{
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.36rem;
          color:#FFFFFF;
          padding:0.4rem 0.32rem;
          box-sizing: border-box;
          .filterWord{
            width:50%;
            /deep/.van-dropdown-menu__bar{
              background-color:#232323;
              .van-dropdown-menu__title{
                color:#ffffff;
              }
            }
            /deep/.van-dropdown-item{
              left:0.3rem;
              right:0.3rem;
            }
          }
        }
        .billList{
          width:100%;
          padding:0 0.3rem;
          box-sizing: border-box;
          .listItems{
            width:100%;
            padding:0.4rem 0;
            box-sizing: border-box;
            .listItemLeft{
              font-size:@fontSize34;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.36rem;
              color:#FFFFFF;
              .time{
                font-size:@fontSize30;
                font-family:@fontFamily400;
                font-weight:@fontWeight400;
                line-height:0.36rem;
                color:#FFFFFF;
                margin-top: 0.16rem;
              }
            }
            .listItemsPrice{
              font-size:@fontSize34;
              font-family:@fontFamily400;
              font-weight:@fontWeight600;
              line-height:0.36rem;
              color:#FFFFFF;
            }
            .colorPrice{
              color:#FD0000;
            }
          }
        }
        .noData{
          width:100%;
          height:3rem;
          color:#ffffff;
        }
      }
    }
    .borderBottom{
      border-bottom:0.02rem solid #000000;
    }
  }
</style>
